<template>
  <img :src="imgPath" :alt="imgAlt">
</template>

<script>
import loading from './loading.gif'
export default {
  props: ['src', 'alt'],
  created(){
    this.lazyLoad(this.src);
    this.imgAlt = this.alt;
  },
  data(){
    return {
      imgPath:'',
      imgAlt: '',
    }
  },
  watch: {
    src:function(newSrc, oldSrc){
      if(newSrc !== oldSrc){
        this.imgPath = newSrc;
        this.lazyLoad(this.imgPath)
      }
    },
    alt: function(newAlt, oldAlt){
      if(newAlt !== oldAlt){
        this.imgAlt = newAlt;
      }
    },
  },
  methods:{
    lazyLoad(path){
      this.imgPath = loading;
      let img = document.createElement('img');
          img.src=path;
          img.onload=()=>{
            this.imgPath=path;
          }
    }
  }
}
</script>

